<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="全选" id="selectAll">
<input type="button" value="全不选" id="noselectAll">
<input type="button" value="反选" id="reverse">
<br><br>
<input type="button" value="批量删除" onclick="deleteAll()">
<!--<input type="text" id="age2">-->
<br>
<table border="1px" width="40%" cellspacing="0px" id="table">
    <tr>
        <td></td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td colspan="2">操作</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check" onclick="average()"></td>
        <td>科比</td>
        <td class="a">34</td>
        <td>男</td>
        <td><input type="button" value="删除" onclick="delete1(this)"></td>
        <td><input type="button" value="详情" onclick="particulars(this)"></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check" onclick="average()"></td>
        <td>哈登</td>
        <td class="a">32</td>
        <td>男</td>
        <td><input type="button" value="删除" onclick="delete1(this)"></td>
        <td><input type="button" value="详情" onclick="particulars(this)"></td>
    </tr>
</table>
<br><br>
姓名: <input type="text" id="name"><br>
年龄: <input type="text" id="age"><span id="age-info"></span><br>
性别: <input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" value="女" name="sex">女<br>
<input type="button" value="保存" onclick="save()">
<hr>
<div style="float: left">
    姓名: <input type="text" id="name1"><br>
    年龄: <input type="text" id="age1"><br>
    性别: <input type="text" id="sex1"><br><br>
</div>
<div style="float: left">
    平均年龄:<input type="text" value="0" id="age2"><br>
    最大年龄: <input type="text" value="0" id="maxAge"><br>
    最小年龄: <input type="text" value="0" id="minAge">
</div>

</body>
</html>
<script type="text/javascript">
    //按钮
    $(function () {
        //全选框
        $("#selectAll").click(function () {
            var checkObj = $("input[type='checkbox'][class='check']");
            for (var i = 0; i < checkObj.length; i++) {
                $(checkObj[i]).prop("checked", true)
            }
        });
        //全不选
        $("#noselectAll").click(function () {
            var checkObj = $("input[type='checkbox'][class='check']");
            for (var i = 0; i < checkObj.length; i++) {
                $(checkObj[i]).prop("checked", false)
            }
        });
        //反选
        $("#reverse").click(function () {
            var checkObj = $("input[type='checkbox'][class='check']");
            for (var i = 0; i < checkObj.length; i++) {
                if ($(checkObj[i]).prop("checked")) {
                    $(checkObj[i]).prop("checked", false);
                } else {
                    $(checkObj[i]).prop("checked", true);
                }
            }
        });
    })
    //保存
    function save() {
        var name = $("#name").val();
        var age = $("#age").val();
        var sex = $("input[name='sex'][checked='checked']").val();
        var html = ' <tr>' +
            '       <td><input type="checkbox" class="check" onclick="average()"></td>' +
            '        <td>' + name + '</td>' +
            '        <td class="a">' + age + '</td>' +
            '        <td>' + sex + '</td>' +
            '        <td><input type="button" value="删除" onclick="delete1(this)"></td>' +
            '        <td><input type="button" value="详情" onclick="particulars(this)"></td>' +
            '    </tr>'
        $("#table").append(html);
    };
    //删除
    function delete1(obj) {
        $(obj).parent().parent().remove();
    }
    //批量删除
    function deleteAll() {
        var obj = $("input[class='check']");
        for (var i = 0; i < obj.length; i++) {

            if ($(obj[i]).prop("checked")) {
                $(obj[i]).parent().parent().remove();
            }
        }
    }
    //详情
    function particulars(obj1) {
        var reobj = $(obj1).parent().parent();
        for (var i = 0; i < reobj.length; i++) {
            console.log($(reobj[i]).find("td").text())
        }
        var arr = $(reobj).find("td");
        // $("#name1").val(arr[1].value);
        // $("#age1").val(arr[2].value);
        // $("#sex1").val(arr[3].value);
        $("#name1").val($(arr[1]).text());
        $("#age1").val($(arr[2]).text());
        $("#sex1").val($(arr[3]).text());
    }
    //平均年龄
    function average() {
        var arr = $("input[type='checkbox'][class='check']:checked").parent().parent();
        // console.log(arr)
        var temp = [];
        for (var i = 0; i < arr.length; i++) {
            var arr1 = $($(arr[i]).children()[2]).text();
            temp.push(arr1)
        }
        var m = 0;
        var maxAge = temp[0];
        var minAge = temp[0];
        for (var i = 0; i < temp.length; i++) {
            m += parseInt(temp[i])
            maxAge = maxAge >= temp[i] ? maxAge : temp[i]
            minAge = minAge <= temp[i] ? minAge : temp[i]
        }
        $("#age2").val(m / temp.length)
        $("#maxAge").val(maxAge)
        $("#minAge").val(minAge)
    }
    function Age() {
        var reg = /^[0-9]{1-3}$/
        if (reg.test($("#age").val())) {
            $("#age-info").html = "";
        } else {
            $("#age-info").html = "账号是由6到8位数字或字母组成";
            return;
        }
    }
</script>